<template>
  <div class="change-page">
    <h2 class="title">您当前的托管钱包账号:</h2>
    <p class="addr">{{email}}</p>
    <h2 class="title">您当前的托管钱包地址:</h2>
    <p class="addr">{{address || '您还没有托管当前设备...'}}</p>
    <div class="input-box">
      <input v-model="mailbox"
        type="text"
        style="width: 100%;"
        placeholder="请填写您想要托管的钱包账号">
    </div>
    <div class="input-box service-charge" style="margin-top: 30px;">
      <input v-model="percent"
        type="text"
        style="text-align: left; flex: 1;"
        placeholder="请填写托管汇率(0.00-1.00)">
      <span style="width: 100px; text-align: right;">托管汇率</span>

    </div>
    <div @click.stop.prevent="goGiveThird"
      class="checkCode-box">
      <button>确认托管</button>
    </div>
  </div>
</template>
<script>
import { request } from '@/utils/request'
export default {
  data() {
    return {
      mailbox: '',
      percent: '',
      email: '',
      address: '',
      deviceId: ''
    }
  },
  created() {
    let self = plus.webview.currentWebview()
    this.email = self.email
    this.address = self.address
    this.deviceId = self.deviceId
  },
  methods: {
    goGiveThird() {
      if (!this.mailbox) {
        plus.nativeUI.toast('请填写您想要托管的钱包账号...')
        return
      }
      plus.nativeUI.showWaiting()
      request({
        method: 'post',
        url: DOUBANAPI + '/trusteeship',
        data: {
          device_id: this.deviceId,
          trusteeship_wallet_address: this.mailbox,
          fee: this.percent
        }
      })
        .then(res => {
          console.log(res)
          plus.nativeUI.closeWaiting()
          plus.nativeUI.toast('托管成功...')
          // let self = plus.webview.currentWebview()
          setTimeout(() => {
            // self.close()
            plus.runtime.restart() // 重启应用
          }, 500)
        })
        .catch(err => {
          console.log('giveThird', err)
          plus.nativeUI.closeWaiting()
          plus.nativeUI.toast(err.response.data.error)
          this.mailbox = ''
          this.percent = ''
        })
    },
    // 百分数转小数
    toPoint(percent) {
      var str = percent.replace('%', '')
      str = str / 100
      return str
    }
  }
}
</script>

<style lang="less">
@import '../../assets/css/reset';
.change-page {
  width: 100%;
  height: 100%;
  padding: 220px 50px 0 50px;
  background: url('../../assets/images/login.png') no-repeat fixed center/cover;
  color: #fff;
  .title {
    height: 32px;
    line-height: 32px;
    font-size: 19px;
    color: #bbbbbb;
  }
  .addr {
    height: 34px;
    line-height: 34px;
    font-size: 24px;
  }
  .service-charge {
    display: flex;
    justify-content: space-between;
  }
  .input-box {
    position: relative;
    padding: 10px 0;
    margin-top: 130px;
    input {
      height: 21px;
      line-height: 21px;
      font-size: 15px;
      color: #fff;
      &::-webkit-input-placeholder {
        color: #bbbbbb;
      }
      &::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #bbbbbb;
      }
      &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #bbbbbb;
      }
      &:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #bbbbbb;
      }
    }
    &::after {
      content: ' ';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background-color: #ffffff;
      transform: scaleY(0.5);
    }
  }
  .checkCode-box {
    width: 100%;
    height: 44px;
    line-height: 44px;
    margin-top: 75px;
    text-align: center;
    button {
      width: inherit;
      height: inherit;
      font-size: 19px;
      border-radius: 22px;
      color: #fff;
      // background: linear-gradient(to right, #7c2bba 0%, #4832cc 100%);
    }
  }
}
</style>
